<div class="file-upload-container" (dragover)="onDragOver($event)" (drop)="onDrop($event)">
  <div class="upload-area" *ngIf="!file">
    <mat-icon>cloud_upload</mat-icon>
    <p>拖拽文件到此处或</p>
    <input type="file" #fileInput (change)="onFileSelected($event)" [accept]="acceptedFileTypes" style="display: none">
    <button mat-raised-button color="primary" (click)="fileInput.click()">
      选择文件
    </button>
    <p class="hint-text">支持的文件大小：{{ maxFileSize / (1024 * 1024 * 1024) }}GB</p>
  </div>

  <div class="file-info" *ngIf="file">
    <div class="file-details">
      <mat-icon>insert_drive_file</mat-icon>
      <div class="file-name-size">
        <span class="file-name">{{ file.name }}</span>
        <span class="file-size">{{ file.size | number }} 字节</span>
      </div>
    </div>

    <div class="upload-progress" *ngIf="isUploading">
      <mat-progress-bar mode="determinate" [value]="uploadProgress"></mat-progress-bar>
      <div class="progress-info">
        <span>{{ uploadProgress }}%</span>
        <span>{{ formatSpeed() }}</span>
      </div>
    </div>

    <div class="action-buttons">
      <button mat-raised-button color="primary" (click)="startUpload()" [disabled]="isUploading">
        {{ isUploading ? '上传中...' : '开始上传' }}
      </button>
      <button mat-button color="warn" (click)="cancelUpload()">
        {{ isUploading ? '取消' : '清除' }}
      </button>
    </div>
  </div>
</div>